<!-- 管理页面-显示内容公共样式 -->
<template>
  <view v-for="(record, index) in records" :key="index" class="record-item">
    <view class="box">
      <!-- 多标题部分 -->
      <view v-for="(entry, entryIndex) in record.entries" :key="entryIndex" class="header">
        <image :src="entry.img" class="animal-image"></image>
        <view class="record-header">
          <view class="record-id">{{ entry.type }}</view>
          <view class="record-imei">IMEI: {{ entry.imei }}</view>
        </view>
        <view class="arrow-container">
          <uv-icon name="arrow-right" color="#a5a5a5" size="28"></uv-icon>
        </view>
      </view>

      <!-- 内容部分（如果有内容） -->
      <view v-if="record.details && record.details.length > 0" class="record-content">
        <view v-for="(detail, key) in record.details" :key="key" class="record-info">
          {{ detail.label }}: {{ detail.value }}
        </view>
      </view>

      <!-- 底部部分 -->
      <view class="record-footer">
        <view class="record-operator">操作员: {{ record.operator }}</view>
        <view class="record-date">{{ record.date }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';

  const props = defineProps({
    records: {
      type: Array,
      required: true
    }
  });
</script>

<style lang="scss" scoped>
   .record-item {
      background-color: white;
      border-radius: 24rpx;
      margin-bottom: 30rpx;
      overflow: hidden;
    }
  
    .box {
      display: flex;
      flex-direction: column;
    }
  
    .header {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0rpx 30rpx;
      margin-top: 35rpx;
	  margin-bottom: 25rpx;
    }
  
    .animal-image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: #00c853;
    }
  
    .record-header {
      flex: 1;
      padding-left: 30rpx;
    }
  
    .record-id {
      font-size: 32rpx;
      margin-bottom: 10rpx;
    }
  
    .record-imei {
      font-size: 24rpx;
      color: #666;
    }
  
    .arrow-container {
      margin-left: auto;
      margin-right: 40rpx;
    }
  
    .record-content {
      padding: 0rpx 30rpx;
      height: 160rpx;
      width: 100%;
      margin-top: 20rpx;
      overflow-y: auto; /* 内容可滚动 */
      -webkit-scrollbar-width: none; /* 隐藏滚动条 */
      scrollbar-width: none;
    }
  
    .record-info {
      font-size: 28rpx;
      margin-bottom: 12rpx;
      color: #333;
    }
  
    .record-footer {
      display: flex;
      justify-content: space-between;
      padding:20rpx 30rpx;
      font-size: 24rpx;
  	border-top: 2rpx solid #f3f5f8;
      color: #666;
    }
  
    .record-date {
      color: #666;
    }
</style>